import LivePlayer from '@/components/LivePlayer'
import usePlayerState from '@/components/LivePlayer/utils/usePlayerState'
import Link from 'next/link'
import styles from './styles.module.scss'
const VideoPlay = ({ videoInfo, mobile, bottomData, pageLink, en }) => {
  const { playerRef } = usePlayerState(videoInfo);
  return (
    <section style={{ padding: "0.2rem", width: "100%" }}>
      <LivePlayer ref={playerRef} mobile={mobile} videoBackList={[{
        videoSrc: videoInfo?.videoSrc || videoInfo?.videoUrl
      }]} />
      <h2 className={styles.title}>精彩视频</h2>
      <section className={styles.h5blocks}>
        {bottomData?.map(row => (
          <Link href={`/${pageLink}/${en}/${row?.id}`} key={row?.id}>
            <a>
              <img src={row?.videoImg || row?.coverImg} />
              <p className='textoverone'>{row?.videoName || row?.title}</p>
            </a>
          </Link>
        ))}
      </section>
    </section>
  )
}


export default VideoPlay